<template>
<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
	<HeadCustom title="简历详情"></HeadCustom>
	<view class="wrap">
		<view class="card userInfo fboxRow">
			<image v-if="pageType != 0" class="avatar" :src="detail.avatar" mode="aspectFill"
				@click="goApp('card')"></image>
			<image v-else class="avatar" :src="detail.avatar" mode="aspectFill"></image>
			<view class="fboxCol flex1">
				<view class="name font34">{{detail.realName}}</view>
				<view class="age font30 color-ACB4C7"> {{getMymethod(detail.birthday, 'Y')}}</view>
				<view class="info fboxRow Ycenter mt24 font26 color-ACB4C7">
					<text style="margin-right: 20rpx;">
						<text class="bwfont bw-Vector10"></text> 
						{{detail.workYears}}
					</text>
					<text>
						<text class="bwfont bw-xueli"></text>
						{{gainData(detail.education, 'educationList').label}}
					</text>
				</view>
			</view>
			<view class="rate" v-if="pageType == 2 && detail.matchIndex != 0">
				<RateItem :num="detail.matchIndex" />
			</view>
		</view>
		<!-- <template v-if="pageType != 0">
		<view class="fboxRow Ycenter btn-group">
			<view v-if="pageType == 2" class="btn flex1 fboxRow Ycenter Xcenter font30 border-E8CDA7 color-E8CDA7" @click="getDownload">下载简历</view>
			<view class="btn flex1 fboxRow Ycenter Xcenter bg-linear font30 color-141720"
		@click="goApp('card')">查看TA的名片</view>
		</view>
	</template> -->

		<view class="fboxRow Ycenter btn-group">
			<view class="btn fboxRow Ycenter Xcenter font30" v-if="detail.voiceUrl" @tap="voiceTap"><text class="bwfont"  :class="isPlay ? 'bw-zanting' : 'bw-yuyin1'"></text> 语音介绍</view>
			<view class="btn fboxRow Ycenter Xcenter font30" v-if="detail.videoUrl" @tap="videoTap"><text class="bwfont bw-shipin"></text> 视频介绍</view>
		</view>
		<view class="line"></view>
		<view class="card">
			<view class="fboxRow Ycenter">
				<view class="tit font38 font-weight flex1">求职期望</view>
			</view>
			<view class="con mt24">
				<view class="font30 fboxRow">
					<view class="flex1">
						<view class="font-ell1" style="margin-bottom: 10rpx;">
							<text class="mr24" v-for="item in detail.expectPositionList" :key="item">{{item}}</text>
						</view>
						<text>{{detail.expectCityName}}</text>
					</view>
					<view class="salary">
						<text v-if="detail.salaryMin == 0">面议</text>
						<text v-else>{{unitNum(detail.salaryMin)}}-{{unitNum(detail.salaryMax)}}</text>
					</view>
				</view>

				<view class="color-ACB4C7 mt24">
					<view class=""><text class="mr24" v-for="item in detail.expectIndustryList"
							:key="item">{{item}}</text></view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="card">
			<view class="fboxRow Ycenter">
				<view class="tit font38 font-weight flex1 color-E8CDA7">个人优势</view>
			</view>
			<view class="con mt24 font30">
				<view class="color-ACB4C7 lh44" style="white-space: pre-wrap;" v-html="detail.advantage">
					{{detail.advantage}}
				</view>
				<Tags :list="detail.resumeKeywordList" />
			</view>
		</view>
		<view class="line"></view>
		<view class="card">
			<view class=" fboxRow Ycenter">
				<view class="tit font38 font-weight flex1 color-E8CDA7">工作经历</view>
			</view>
			<view class="con mt24 font26">
				<template v-if="detail.workExperienceList && detail.workExperienceList.length">
					<view v-for="(item, index) in detail.workExperienceList" :key="index">
						<view class="line" v-if="index !== 0"></view>
						<view class="font30">{{item.position}}</view>
						<view class="color-ACB4C7">{{item.companyName}}</view>
						<view class="color-6B707C mt24">{{item.gmtStartWork.replace('-', '.')}} -
							{{item.gmtEndWork.replace('-', '.')}}</view>
						<view class="color-ACB4C7 mt24">
							<view style="white-space: pre-wrap;" v-html="item.jobContent"></view>
						</view>
					</view>
				</template>
				<text v-else class="color-6B707C">未添加工作经历</text>
			</view>
		</view>
		<view class="line"></view>
		<view class="card">
			<view class=" fboxRow Ycenter">
				<view class="tit font38 font-weight flex1 color-E8CDA7">项目经历</view>
			</view>
			<view class="con mt24">
				<template v-if="detail.projectExperienceList && detail.projectExperienceList.length">
					<view v-for="(item, index) in detail.projectExperienceList" :key="index">
						<view class="line" v-if="index !== 0"></view>
						<view class="font30">{{item.position}}</view>
						<view class="color-ACB4C7">{{item.projectName}}</view>
						<view class="color-6B707C mt24">
							{{item.gmtStartWork.replace('-', '.')}}至{{item.gmtEndWork.replace('-', '.')}}</view>
						<view class="color-ACB4C7 lh44 mt24">
							<view style="white-space: pre-wrap;" v-html="item.projectDescription"></view>
						</view>
					</view>
				</template>
				<text v-else class="color-6B707C">未填写项目经历</text>
			</view>
		</view>
		<template v-if="pageType == 0 || (companyAuthStatus == 1 && pageType == 2 )">
			<view class="line"></view>
			<view class="card fboxCol" v-if="detail.accessoryData">
				<view class="tit font38 font-weight flex1 color-E8CDA7">附件简历</view>
				<view class="file-item mt32 fboxRow Ycenter bg-21242C">
					<image class="file-type"
						src="https://ebc-prod.cdn.benwunet.com/uni-static/workplace/icon-file.png"></image>
					<view class="flex1">
						<view class="tit font30 lh38">{{detail.accessoryData.name}}</view>
						<view class="con font26 lh38 color-6B707C font26">{{detail.accessoryData.gmtUpLoad}}
							{{detail.accessoryData.fileSize}}
						</view>
					</view>
					<u-icon name="more-dot-fill" color="#6B707C" @click="moreAction"></u-icon>
					<ActionSelect pattern="top:94rpx;right: 0" arrowPattern="right: 40rpx" :isShow.sync="isAction"
						:list="actionList" @action="actionClick" />
				</view>
			</view>
		</template>
		<template v-if="pageType != 1">
			<BottomFixed class="btn-group-box">
				<view class="flex1 btn-group-inner btn-group-inner-single fboxRow Ycenter Xcenter" v-if="pageType == 0 || pageType == 3">
					<view  class="btn flex1 fboxRow Ycenter Xcenter font30 bg-linear" @click="goPage">返回</view>
				</view>
				<view class="flex1 btn-group-inner fboxRow Ycenter Xcenter bg-1A1D25" v-else>
					<view class="flex1 fboxRow Ycenter color-6B707C font22">
						<view class="fboxCol Ycenter Xcenter action-item flex1" @click="actionTap('collect')">
							<text class="bwfont font40 bw-a-ziyuan1"></text>
							<text class="text">{{detail.collectFlag ? '已收藏' : '收藏'}}</text>
						</view>
						<view v-if="pageType == 2"  class="fboxCol Ycenter Xcenter action-item flex1" @click="getDownload">
							<text class="bwfont font40 bw-xiazai"></text>
							<text class="text">下载简历</text>
						</view>
						<view class="fboxCol Ycenter Xcenter action-item flex1" @click="actionTap('invite')">
							<text class="bwfont font40 bw-a-Vector1"></text>
							<text class="text">{{detail.inviteFlag ? '已邀约' : '邀约'}}</text>
						</view>
					</view>
					<view class="btn btn-outline fboxRow Ycenter Xcenter font30 color-141720 bg-linear"
						@click="actionTap('contact')">沟通一下</view>
				</view>
			</BottomFixed>
		</template>
		<view class="company-box" v-if="isCompany">
			<u-popup :show="isCompany" @close="isCompany = false" :safeAreaInsetBottom="false">
				<view class="company-list">
					<view class="hd fboxRow Ycenter">
						<view class="flex1 font30 color-E8CDA7">选择企业</view>
						<view class="close" @click="isCompany = false"><u-icon name="close" size="18"
								color="#5A5A5A"></u-icon></view>
					</view>
					<view class="tips mt20 font26 lh38">你在以下企业中有招聘权限</view>
					<view class="bd">
						<view v-if="list.length">
							<view class="company-card bg-21242C" v-for="(item, index) in list" :key="index"
								@click="companyTap(item)">
								<view class="fboxRow Ycenter">
									<image class="logo" :src="item.companyLogo" mode="aspectFill"></image>
									<view class="flex1 fboxRow enterprises_view">
										<view class="font28 name font-ell1">{{ item.companyName }}</view>
										<text v-if="item.authStatus == 1" class="ml24 bwfont bw-qiye color-linear"></text>
									</view>
									<!-- <view class="action fboxRow Ycenter"><text class="bwfont bw-arrow-right color-ACB4C7 font28"></text></view> -->
								</view>
							</view>
						</view>
						<view v-if="loading == 'list-not'">
							<view class="not-card mt32 bg-21242C"><not-empty :height="300" text="暂无企业"></not-empty>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
	<u-overlay :show="isVideo" @click="isVideo = false">
		<view class="video-box" @tap.stop>
			<view class="close" @click="isVideo = false"><u-icon size="42rpx" name="close" color="#fff"></u-icon></view>
			<video class="video-inner" :src="detail.videoUrl"></video>
		</view>
	</u-overlay>
</view>
</template>

<script>
import {
	resumeDetail,
	orgInterview,
	orgCollect,
	companyDetail,
	companyList,
	resumeExportPdf
} from '@/api/recruit.js';
import {
	timestampToTime,
	getDate,
	getMymethod,
	unitNum,
	getRequest
} from '@/static/js/common.js';
import {
	gainData
} from '../common/config.js';
import Tags from '../components/tags.vue';
import ActionSelect from '../components/action-select.vue';
import RateItem from '../components/rate-item.vue';
import {
	utf8to16,
	base64decode
} from '@/static/js/Base64.js';
	import BottomFixed from '@/components/bottom-btn/fixed.vue'
let innerAudioContext = null
export default {
	components: {
		Tags,
		ActionSelect,
		RateItem,
		BottomFixed
	},
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			gainData: gainData,
			getMymethod: getMymethod,
			unitNum: unitNum,
			detail: {},
			id: '',
			jobId: '',
			companyId: getApp().globalData.companyId,
			companyAuthStatus: getApp().globalData.companyInfo.authStatus,
			pageType: 1, // 0 自己 1 别人 2 公司 3 名片详情
			isInvite: false,
			dated: new Date().getTime(),
			actionList: [{
				value: 1,
				label: '查看',
			}, {
				value: 2,
				label: '下载',
			}],
			isAction: false,
			isCompany: false,
			loading: 'none',
			list: [],
			parentPage: '' ,// card 名片详情页
			isPlay: false,
			isVideo: false,
			// voiceUrl: 'https://ebc-prod.cdn.benwunet.com/4f3e16912035403facc602d136a202ea.mp3',
			// videoUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
		}
	},
	onLoad(option) {
		if (option && option.pageType) {
			this.pageType = option.pageType
		}
		if (option && option.jobId) {
			this.jobId = option.jobId
		}
		if (option && option.companyId) {
			this.companyId = option.companyId
			this.getCompanyInfo()
		}
		if (option && option.parentPage) {
			this.parentPage = option.parentPage
		}
		if (option && option.benwu) {
			const benwu = utf8to16(base64decode(option.benwu))
			const token = {
				access_token: getRequest(benwu, 'token'),
				userId: getRequest(benwu, 'userId'),
				pageType: getRequest(benwu, 'pageType'),
				statusBarHeight: getRequest(benwu, 'statusBarHeight')
			}
			this.pageType = token.pageType
			this.id = getRequest(benwu, 'id')
			console.log(benwu)
			getApp().globalData.userId = token.userId
			getApp().globalData.statusBarHeight = token.statusBarHeight
			uni.setStorageSync('bw_params', JSON.stringify(token));
			// this.getInit()
		}
		if (option && option.id) {
			this.id = option.id
		}
	},
	onShow() {
		if (this.id) {
			this.getInit()
		}
	},
	methods: {
		// 语音播放
		voiceTap(){
			if(!innerAudioContext){
				innerAudioContext = uni.createInnerAudioContext();
			}
			if(this.detail.voiceUrl){
				if(this.isPlay){
					this.isPlay = false
					innerAudioContext.pause();
				}else{
					this.isPlay = true
					innerAudioContext.src = this.detail.voiceUrl;
					innerAudioContext.play();
				}
				innerAudioContext.onEnded(()=>{
					this.isPlay = false
				})
			}
		},
		videoTap(){
			if(innerAudioContext){
				if(this.isPlay){
					this.isPlay = false
					innerAudioContext.pause();
				}
			}
			this.isVideo = true
		},
		// 下载简历
		getDownload() {
			const {
				bw_link
			} = getApp().getBWData(['bw_link'])
			if (bw_link.isApp) {
				const data = {
					type: 'vitaArraybuffer',
					id: this.detail.id,
					realName: this.detail.realName
				}
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回')
				})
			} else {
				resumeExportPdf({
					id: this.detail.id
				}).then(res => {
					console.log(res)
					// #ifdef H5
						let pdfData = res.data.filePath //创建预览路径	
						let downloadElement = document.createElement("a");
						downloadElement.href = pdfData
						downloadElement.download = res.data.fileName // 下载后文件名
						document.body.appendChild(downloadElement)
						downloadElement.click() // 点击下载
						document.body.removeChild(downloadElement) // 下载完成移除元素
						window.URL.revokeObjectURL(pdfData) // 释放掉blob对象
					// #endif
					// #ifdef MP
					uni.saveFile({ //文件保存到本地
						tempFilePath: res.data.filePath, //临时路径
						success: function(res) {
						  uni.showToast({
							icon: 'none',
							mask: true,
							title: '文件已保存!', 
							duration: 3000,
						  });
						}
					});
					// #endif
				})
			}
		},
		actionTap(type) {
			if (this.companyId) {
				if (type == 'collect') {
					this.collect()
				} else if (type == 'invite') {
					this.inviteTap()
				} else if (type == 'contact') {
					this.goApp('contact')
				}
			} else {
				console.log('选择公司')
				this.isCompany = true
			}
		},
		companyTap(item) {
			this.companyId = item.companyId
			this.isCompany = false
			this.pageType = 2
			this.getCompanyInfo()
			this.getInit()
		},
		moreAction() {
			this.isAction = !this.isAction
		},
		getCompanyInfo() {
			companyDetail({
				id: this.companyId
			}).then(res => {
				getApp().globalData.companyInfo = res.data
				getApp().globalData.companyId = res.data.companyId
				uni.setStorageSync('bw_company_info', JSON.stringify(res.data));
			})
		},
		getComanylist() {
			companyList({
				type: 'isResume'
			}).then(res => {
				if (res.data && res.data.length) {
					this.list = res.data;
				} else {
					this.loading = 'list-not'
				}
				this.isCompany = true
			});
		},
		actionClick(e) {
			if (e.value.value == 1) {
				const data = {
					type: 'vitaLook',
					fileUrl: this.detail.accessoryData.fileUrl,
					fileName: this.detail.accessoryData.name
				}
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回')
				})
			} else if (e.value.value == 2) {
				const data = {
					type: 'vitaDownload',
					fileUrl: this.detail.accessoryData.fileUrl,
					fileName: this.detail.accessoryData.name
				}
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回')
				})
			}
		},
		getInit() {
			let obj = {
				id: this.id
			}
			if (this.jobId) {
				obj.jobId = this.jobId
			}
			if (this.companyId) {
				obj.companyId = this.companyId
			} else {
				if (this.pageType == 2) {
					this.getComanylist()
					this.pageType = 3
				}
			}
			resumeDetail(obj).then(res => {
				this.detail = res.data
			})
		},
		goPage() {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			console.log(pages.length); //获得当前webview的id
			if (pages.length == 1) {
				const data = {
					type: 'back'
				}
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回')
				})
			} else {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		goApp(type) {
			const {
				bw_link
			} = getApp().getBWData(['bw_link'])
			if (bw_link.isApp != 1) {
				if (type == 'card') {
					if (this.parentPage == 'card') {
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$pageTo('/CardDetail', {
							id: this.detail.memberId
						})
					}
				} else if (type == 'contact') {
					this.$pageTo('/about/guidePage')
				}
				return
			}
			if (type == 'card') {
				const data = {
					type: 'card',
					memberId: this.detail.memberId
				}
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回')
				})
			} else {
				if (getApp().globalData.companyInfo.authStatus != 1) {
					uni.showToast({
						icon: 'none',
						title: '你的企业还未认证，请先认证后再操作！'
					})
					return
				}
				const data = {
					type: 'contact',
					memberId: this.detail.memberId,
					userName: this.detail.realName
				}
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回')
				})
			}
		},
		collect() {
			orgCollect({
				"companyId": this.companyId,
				"isCollect": !this.detail.collectFlag,
				"resumeId": this.detail.id
			}).then(res => {
				if (res.data) {
					this.detail.collectFlag = !this.detail.collectFlag
					uni.showToast({
						icon: 'none',
						title: this.detail.collectFlag ? '收藏成功' : '取消收藏'
					})
				}
			})
		},
		inviteTap() {
			if (this.detail.inviteFlag) {
				uni.showToast({
					icon: 'none',
					title: '已经邀约过了'
				})
			} else {
				if (getApp().globalData.companyInfo.authStatus != 1) {
					uni.showToast({
						icon: 'none',
						title: '你的企业还未认证，请先认证后再操作！'
					})
					return
				}
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				if (prevPage && prevPage.route == 'pagesApp/recruit/enterprise/invitation') {
					uni.navigateBack({
						delta: 1
					})
				} else {
					this.$pageTo('/recruit/enterprise/invitation', {
						id: this.detail.id,
						companyId: this.companyId
					})
				}
			}
		}
	}
}
</script>

<style lang="scss" scoped>

.video-box{width: 100%;height: calc(100vh);}
.video-box .video-inner{ position: relative;z-index: 2; width: calc(100vw);height: calc(100vh);}
.video-box .close {position: fixed; top: 150rpx;right: 24rpx;z-index:10;width:50rpx;height:50rpx;border-radius: 50%}
.company-box,
.company-list {
	background-color: var(--controllerBgColor);
}

.company-box .hd {
	height: 86rpx;
	border-bottom: 1rpx solid var(--backgroundDivisionColor);
}

.company-box .bd {
	padding: 20rpx 0 60rpx;
	min-height: 100rpx;
	max-height: 800rpx;
	overflow-y: auto;
}

.company-list .tips {
	color: #5A5A5A
}

.company-list {
	padding: 24rpx 40rpx 0;
}

.company-card {
	margin-top: 24rpx;
	padding: 24rpx;
	border-radius: 12rpx;
}

.company-card .logo {
	margin-right: 22rpx;
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
}

.company-card .name {
	line-height: 40rpx;
	max-width: 420rpx;
}

.company-card .logo_rz {
	width: 40rpx;
	height: 40rpx;
	margin-left: 10rpx;
}

.company-card .not-card {
	padding-bottom: 120rpx;
}

.wrap {
	padding: 32rpx 40rpx;
}

.look-btn {
	margin: 50rpx auto 0;
	width: 570rpx;
	height: 76rpx;
	border-radius: 12rpx;
}

.card {
	// padding: 32rpx;
	margin-bottom: 40rpx;
}

.card .tit {
	line-height: 56rpx;
	color: var(--contourButtonTextColor)
}

.card .con {
	line-height: 38rpx;
}

.userInfo {
	position: relative;
}

.rate {
	position: absolute;
	right: 40rpx;
	top: 18rpx;
}

.userInfo .avatar {
	margin-right: 24rpx;
	width: 100rpx;
	height: 100rpx;
	border: 2rpx solid #F7F9FF;
	border-radius: 50%;
	overflow: hidden;
}

.userInfo .name {
	line-height: 50rpx;
}
.userInfo .info .bwfont{margin-right: 6rpx;}
.userInfo .age {
	line-height: 44rpx;
}

.btn-group {}
.btn-group .btn .bwfont{margin-right: 8rpx;font-size: 40rpx; background: linear-gradient(360deg, #C49875 6%, #EDB384 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
.btn-group .btn {
	width: 328rpx;
	height: 88rpx;
	background: var(--pureButtonBackOneColor);
	border-radius: 12rpx;
	border: 1rpx solid var(--buttonOutlineOneColor);
	color: var(--contourButtonTextColor)
}



.btn-group .btn+.btn {
	margin-left: 30rpx;
}

.more-item {
	height: 70rpx;
	margin-bottom: 24rpx;
}


.line {
	margin: 32rpx 0;
	height: 1rpx;
	background: var(--backgroundDivisionColor);
}
.salary{color: var(--buttonOutlineOneColor);}

.file-item {
	position: relative;
	padding: 32rpx;
	width: 670rpx;
	border-radius: 12rpx;
}

.file-type {
	margin-right: 16rpx;
	width: 80rpx;
	height: 80rpx
}

.btn-group-box /deep/ .fixed-bottom{padding-left: 0;}
.btn-group-box /deep/ .btn-groupo .btn-group-inner-single{padding-left: 40rpx;}
.btn-group-inner .icon { width: 48rpx; height: 48rpx}
.btn-group-inner .btn { height: 88rpx; border-radius: 12rpx;}
.btn-group-inner .btn-outline{width: 320rpx;}
.btn-group-inner .action-item {
	color:var(--contourButtonTextColor);
	// width: 80rpx;
	height: 88rpx;
}
.btn-group-inner .action-item .text{margin-top: 10rpx;}

.btn-group-inner .btn+.btn {
	margin-left: 24rpx;
}
</style>